<template>
	<view class="activityDetails">
		<view class="top">
			<image class="top_img" :src="info.cover_thumb" mode="aspectFit"  @tap="previewImage" :data-src="info.cover" v-show="info.cover != ''"></image>
			<view class="top_info">
				<view class="uni-flex uni-row">
					<view style="-webkit-flex: 1;flex: 1;font-size: 40rpx;font-weight:bold;">{{info.merchant_name}}</view>
					<view style="width: 200rpx;font-weight: 400;text-align:right;">{{info.status_name}}</view>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text>联系人：{{info.proposer_name}}</text>
				</view>
			</view>
			<view class="line" >
				<view class="left">
					<text @click="callPhone()">联系电话：{{info.proposer_mobile}}</text>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text @click="showMap()">地址：{{info.address}}</text>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text>店铺分类：{{info.category_name}}</text>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text>申请时间：{{info.apply_time}}</text>
				</view>
			</view>
			<view class="line" v-if="info.license != ''">
				<view class="left">
					<text>营业执照注册号：{{info.license}}</text>
				</view>
			</view>
			<view class="line" v-if="info.license_full_name != ''">
				<view class="left">
					<text>营业执照注册名称：{{info.license_full_name}}</text>
				</view>
			</view>
			<view class="line" v-if="info.license_pic != ''">
				<view class="left">
					<text>营业执照照片：
					
					</text>
					<image :src="info.license_pic_thumb" mode="aspectFit"  @tap="previewImage" :data-src="info.license_pic" style="width: 100px;height: 100px;;"></image>
				</view>
			</view>
			<view class="line" v-if="info.valid_date != ''">
				<view class="left">
					<text>开通年份：{{info.valid_date}}</text>
				</view>
			</view>
		</view>
		<button v-if="info.is_upload_info > 0" type="default" style="background: #fff;width: 100%; margin: 0 0 20px 0; height:60px;" @click="jump('business_upload', info.id)">
			<view class="sign">{{info.is_upload_info == 1 ? "上传" : "更新"}}资料</view>
		</button>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				id: 0,
				info: {
					'id' : 0,
					'cover' : '',
					'cover_thumb' : '',
					'merchant_name' : '',
					'proposer_name' : '',
					'proposer_mobile' : '',
					'address' : '',
					'status_name' : '',
					'category_name' : '',
					'apply_time' : '',
					'license' : '',
					'license_full_name' : '',
					'license_pic' : '',
					'license_pic_thumb' : '',
					'valid_date' : '',
					'money': '',
					'is_lobby_eat' : '',
					'is_take_out' : '',
					'is_store' : '',
					'is_pay' : '',
					'is_upload_info' : 0,
				},
				imgList: [],
			}
		},
		methods: {
			getInfo() {
				var self = this;
				serve.request({
					url: '/spread/business/view',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: self.id
					}
				}).then(res => {
					self.info = res.data;
					if(self.info.cover != '') {
						self.imgList[0] = self.info.cover;
					}
					if(self.info.license_pic != '') {
						self.imgList[1] = self.info.license_pic;
					}
				});
			},
			showMap() {
				uni.openLocation({
				    latitude: Number(this.info.latitude),
				    longitude: Number(this.info.longitude),
				    success: function (res) {
				        console.log(res);
				    }
				});
			},
			callPhone() {
				uni.makePhoneCall({
				    phoneNumber: this.info.proposer_mobile //仅为示例
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imgList
				})
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							common.jump('business_index')
						}, 2000) 
					}
				});
				return ;
			}
			// this.getInfo();
		},
		onShow() {
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.activityDetails {
		padding-bottom: 100rpx;


		.top {
			border-bottom: 16rpx rgba(251, 251, 253, 0.8) solid;

			.top_img {
				width: 100%;
				height: 420rpx;

			}

			.top_info {
				margin: 0rpx 30rpx;
				padding: 35rpx 0rpx;
				border-bottom: 1rpx rgba(57, 72, 107, 0.1) solid;
				position: relative;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: rgba(60, 72, 104, 1);
				}

				.read {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					padding: 23rpx 0rpx 34rpx;

					image {
						width: 36rpx;
						margin-right: 10rpx;
					}
				}

				.pic {
					font-size: 24rpx;
					color: rgba(255, 182, 52, 1);
				}

				.top_bot {
					position: absolute;
					right: 0;
					width: 151rpx;
					height: 60rpx;
					background: rgba(255, 182, 52, 1);
					font-size: 24rpx;
					text-align: center;
					line-height: 60rpx;
					color: #FFFFFF;
					bottom: 54rpx;
				}
				.top_bot2 {
					position: absolute;
					right: 0;
					width: 151rpx;
					height: 60rpx;
					background: rgba(255, 182, 52, 1);
					font-size: 24rpx;
					text-align: center;
					line-height: 60rpx;
					bottom: 54rpx;
					background: #ececec;
					color: #666666;	
				}
			}

			.line:last-child {
				border: none;
			}

			.line {
				margin: 0rpx 30rpx;
				padding: 26rpx 0rpx;
				border-bottom: 1rpx rgba(57, 72, 107, 0.1) solid;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: rgba(57, 72, 107, 0.5);

					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 8rpx;
					}
				}

				.right {
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

		}


		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			// position: fixed;
			// bottom: 0rpx;
			width: 100%;
			// left: 0;
			height: 100rpx;
			border-top: 1rpx rgba(57, 72, 107, 0.1) solid;
			box-sizing: border-box;
			padding: 0rpx 52rpx 0rpx 29rpx;
            .bottom_input{
				display: flex;
				align-items: center;
				text{
					font-size: 32rpx;
					margin-left: 20rpx;
				}
			}
			image {
				width: 40rpx;
				height: 34rpx;
			}

			input {
				width: 408rpx;
				height: 64rpx;
				background: rgba(60, 72, 104, 0.1);
				border-radius: 32rpx;
				font-size: 26rpx;
				padding-left: 52rpx;
			}
		}
		.uni-row {
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -webkit-flex-direction: row;
		    flex-direction: row;
		}
		.uni-flex {
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -webkit-flex-direction: row;
		    flex-direction: row;
		}
        .sign{
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FFC600;
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			left: 0;
			height: 100rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			z-index: 9999;
		}
		
	}
</style>
